<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="slider">
    <ul>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
    </ul>
</div>
<div class="button-container">
    <button class="next">下一张</button>
</div>

<script src="jquery-1.12.4.js"></script>
<script>

  const $ulLis = $(".slider ul li");
  let sem = 0;
  $(".next").click(function () {
    sem -= 90;
    $ulLis.css({ transform: `rotateX(${sem}deg)` });
  });

  // $ulLis.eq(0).css({}).children().css({
  //   "background-size": "720px 360px",
  //   "background-position": "0 0",
  //   "background-repeat": "no-repeat",
  // });
  // $ulLis.eq(1).css({
  //   "transition-delay": "0.5s",
  // }).children().css({
  //   "background-size": "720px 360px",
  //   "background-position": "-180px 0",
  //   "background-repeat": "no-repeat",
  // });
  // $ulLis.eq(2).css({
  //   "transition-delay": "1s",
  // }).children().css({
  //   "background-size": "720px 360px",
  //   "background-position": "-360px 0",
  //   "background-repeat": "no-repeat",
  // });
  // $ulLis.eq(3).css({
  //   "transition-delay": "1.5s",
  // }).children().css({
  //   "background-size": "720px 360px",
  //   "background-position": "-540px 0",
  //   "background-repeat": "no-repeat",
  // });

  const NUM = 5; // 横向分成几份
  const width = 720 / NUM; // 一份的宽度

  for (let i = 0; i < NUM; i++) {
    $ulLis.eq(i).css({
      "width": `${width}px`,
      "transition-delay": `${i * 0.1}s`,
    }).children().css({
      "background-size": "720px 360px",
      "background-repeat": "no-repeat",
      "background-position": `-${width * i}px 0`,
    });
  }
</script>
</body>
</html>
